<template>
    <div>
        <a-form-item>
            <template #label>
                <div class="labelBox" @click="status = !status">
                    <CaretRightOutlined class="statusButton" :class="{ show: status }" v-if="showContent" />
                    <span>{{ label }}</span>
                </div>
            </template>
            <slot></slot>
        </a-form-item>
        <div class="Content" v-if="showContent && status">
            <slot name="Content"></slot>
        </div>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue';
import { CaretRightOutlined } from '@ant-design/icons-vue'
const props = defineProps(['showContent', 'label']);
const status = ref(false);

watch(() => props.showContent, (val) => {
    if (val) {
        status.value = true;
    } else {
        status.value = false;
    }
})

defineExpose({
    SetState(val) {
        status.value = val;
    },
})

</script>
<style lang="less" scoped>
.statusButton {
    margin-right: 4px;
    transition: transform 0.2s;

    &.show {
        transform: rotateZ(90deg);
    }
}

.Content {
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0);
    padding: 8px;
    background-color: #f0f0f0;
}

.labelBox {
    display: flex;
    width: 100%;
    cursor: pointer;
}
</style>